import React from 'react';
import {Helmet} from "@umijs/max";

interface SeoHeadProps {
  title: string; // 页面标题
  description?: string; // 页面描述
  keywords?: string; // 页面关键词
  image?: string; // 社交分享图
  url?: string; // 页面完整 URL
  siteName?: string; // 站点名称
}

const DEFAULT_SITE_NAME = '我的站点';
const DEFAULT_IMAGE = 'https://example.com/default-cover.jpg';
const DEFAULT_URL = 'https://example.com/';

const SeoHead: React.FC<SeoHeadProps> = ({
                                           title,
                                           description = '这是我的 Ant Design Pro 站点',
                                           keywords = '',
                                           image = DEFAULT_IMAGE,
                                           url = DEFAULT_URL,
                                           siteName = DEFAULT_SITE_NAME,
                                         }) => {
  const fullTitle = `${title} - ${siteName}`;

  return (
    <Helmet>
      {/* 基础 SEO */}
      <title>{fullTitle}</title>
      <meta name="description" content={description}/>
      {keywords && <meta name="keywords" content={keywords}/>}
      <meta name="author" content={siteName}/>
      <link rel="canonical" href={url}/>
      <meta name="theme-color" content="#1890ff"/>

      {/* Open Graph */}
      <meta property="og:title" content={fullTitle}/>
      <meta property="og:description" content={description}/>
      <meta property="og:type" content="website"/>
      <meta property="og:url" content={url}/>
      <meta property="og:image" content={image}/>
      <meta property="og:site_name" content={siteName}/>

      {/* Twitter Card */}
      <meta name="twitter:card" content="summary_large_image"/>
      <meta name="twitter:title" content={fullTitle}/>
      <meta name="twitter:description" content={description}/>
      <meta name="twitter:image" content={image}/>

      {/* 响应式 & 移动端优化 */}
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="apple-mobile-web-app-capable" content="yes"/>
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
      <meta name="apple-mobile-web-app-title" content={siteName}/>

      {/* Favicon */}
      <link rel="icon" href="/favicon.ico" type="image/x-icon"/>

      {/* Schema.org 结构化数据 */}
      <script type="application/ld+json">
        {JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'WebSite',
          name: siteName,
          url: url,
          potentialAction: {
            '@type': 'SearchAction',
            target: `${url}search?q={search_term_string}`,
            'query-input': 'required name=search_term_string',
          },
        })}
      </script>
    </Helmet>
  );
};

export default SeoHead;
